<template>
  <el-scrollbar style="height: 100%">
    <div class="discussion">
      <div class="item" v-for="(item, index) in info" :key="index">
          {{ item.userName }}:
          {{ item.talkContent }}
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import {
  computed,
  reactive,
  getCurrentInstance,
  onMounted,
  watch,
  watchEffect,
} from "vue";
export default {
  props: ["lessonId"],
  setup(props) {
    const { ctx, proxy } = getCurrentInstance();

    let lessonId1 = computed(() => {
      console.log(props.lessonId);
      return props.lessonId;
    });

    watch(lessonId1, (newValue, oldValue) => {
      //直接监听
      // setTimeout(mygetCourseList(), 2000)
      mygetCourseList();
      setInterval(mygetCourseList(), 1000);
      console.log("子组件有新值改变", newValue);
    });
    let info = reactive([]);

    function mygetCourseList() {
      console.log(window.localStorage.getItem("lessonId"));
      if (window.sessionStorage.getItem("lessonId")) {
        proxy.$axios.course
          .getTalk({
            lessonId: window.localStorage.getItem("lessonId"),
            token: window.sessionStorage.getItem("token"),
          })
          .then((res) => {
            const data = res.data.data;
            for (let i = 0; i < data.length; i++) {
              info[i] = {
                talkContent: data[i].talkContent,
                userName: data[i].userName,
              };
            }
          });
      }
    }
    onMounted(() => {
      mygetCourseList();
      // setInterval("mygetCourseList()",1000);
    });
    return {
      mygetCourseList,
      info,
    };
  },
  created() {
    // 获取推荐课程or所有课程？
    // 访问接口
  },
};
</script>

<style lang="scss" scoped>
.discussion {
  margin: 20px 10px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.item {
  margin: 12px 0;
  margin-left: 10px;
}
</style>
